<template>
  <el-container class="main">

    <el-aside id="sideBar" class="sideBar" width="200px">
      <side-bar></side-bar>
    </el-aside>

    <el-aside v-show="isCollapse" class="coolSideBar" width="20px">

      <el-button type="text" class="toggleBtn" @click="sideToggle()">
        <el-icon size=20>
          <expand/>
        </el-icon>
      </el-button>

    </el-aside>

    <el-main class="nonePad main">
      <edit-content></edit-content>
    </el-main>

  </el-container>
</template>

<script>

import EditContent from "@/components/EditContent";
import SideBar from "@/components/SideBar";
import emitter from "@/common/util/mitt";
import {onMounted, ref} from "vue";
import {Expand} from '@element-plus/icons'

export default {
  name: 'DashBoard',
  components: {EditContent, SideBar, Expand},

  setup() {
    let isCollapse = ref(false);
    let sideToggle = () => {
      isCollapse.value = !isCollapse.value
      console.log("TOGGLE_11111111___")
      console.log(isCollapse.value)
      if (isCollapse.value) {
        console.log("TOGGLE______222222222222_____")

        document.getElementById("sideBar").style.marginLeft = "-200px"
      } else {
        document.getElementById("sideBar").style.marginLeft = "0"
      }
    }
    onMounted(() => {
      emitter.on("toggle", (value) => {
        console.log("TOGGLE___________")
        sideToggle()
      })
    })

    return {isCollapse, sideToggle}

  }
}
</script>
<style>
.main {
  overflow: hidden
}

.sideBar {
  background: #f6f8fa;
  /*height: 100vh;*/
  overflow: hidden;
  /*position: relative;*/
  margin-left: 0;
  transition: margin-left 0.5s
}

.nonePad {
  padding: unset;
  margin: unset;
}

.coolSideBar {
  background: #f6f8fa;
  overflow: hidden;
  margin-left: 0;
  transition: margin-left 0.5s;
  z-index: 100;
}

.toggleBtn {
  /*position: relative;*/
  /*right: -1px;*/
  color: #1d2125;
  float: right
}

.toggleBtn:hover {
  color: dodgerblue;

}

</style>
